export const statisticsEcharts = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '8%',
    right: '5%',
    bottom: '20%',
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2024-05-10', '2024-05-11', '2024-05-12', '2024-05-13', '2024-05-14', '2024-05-15', '2024-05-16', '2024-05-17', '2024-05-18', '2024-05-19', '2024-05-20']
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100
    },
    {
      start: 0,
      end: 100
    }
  ],
  legend: {
    icon: 'rect',
    itemHeight: 12,
    itemWidth: 12,
    top: '2%',
    data: ['注册用户数', '已实名用户数', '已认证商户数'],
    selected: { // 默认把后两项置灰
      '注册用户数': true,
      '已实名用户数': true,
      '已认证商户数': true
    }
  },
  series: [
    {
      name: '注册用户数',
      type: 'line',
      areaStyle: {},
      symbol: 'none',
      smooth: true,
      data: [100, 105, 205, 800, 850, 900, 950, 1100, 1600, 3200, 3600]
    },
    {
      name: '已实名用户数',
      type: 'line',
      areaStyle: {},
      symbol: 'none',
      smooth: true,
      data: [100, 800, 850, 900, 1500, 1600, 1700, 1800, 2500, 4300, 4800]
    },
    {
      name: '已认证商户数',
      type: 'line',
      areaStyle: {},
      stack: 'Total',
      symbol: 'none',
      smooth: true,
      data: [100, 400, 800, 1200, 1800, 2400, 4800, 5200, 5800, 5800, 5800]
    }
  ],
  media: [ // 这里定义了 media query 的逐条规则。
    {
      query: { maxWidth: 700 },   // 这里写规则。
      option: {       // 这里写此规则满足下的option。
        legend: {
          top: '12%',
        },
        grid: {
          top: '20%',
        },
      }
    },
    {
      query: { minWidth: 701, maxWidth: 1024 },   // 这里写规则。
      option: {       // 这里写此规则满足下的option。
        legend: {
          top: '2%',
          left: '15%'
        },
      }
    },
    {
      query: { minWidth: 1025 },   // 这里写规则。
      option: {       // 这里写此规则满足下的option。
        legend: {
          left: '25%'
        },
      }
    }

  ]
}

export const circleEcharts1 = {
  series: [
    {
      type: 'pie',
      width: '100%',
      radius: ['80%', '90%'],
      // 图形上的文本标签设置项
      avoidLabelOverlap: false,
      label: {
        show: true,
        // 设置文本标签在图形中心位置
        position: "center",
        // 自定义文本标签的内容和格式，title是文本'总额度/GB'的样式名，num是文本'10,000'的样式名，.join("\n")是给文本加换行
        formatter: ["{title|注册用户/万}", "{num|100}"].join("\n"),
        // 设置formatter中的文本样式，要用对应的标记样式名
        rich: {
          title: {
            padding: [0, 0, 8, 0],
            color: "#424864",
          },
          num: {
            color: "#424864",
          },
        },
      },
      // 标签的视觉引导线配置
      labelLine: {
        // 设置为不显示视觉引导线
        show: false,
      },
      data: [
        {
          value: 335,
          name: 'A',
          itemStyle: {
            normal: {
              color: '#5470c6',
            }
          }
        },
      ],
      emphasis: {
        disabled: true,
        scale: false,
      },
    }
  ]
};

export const circleEcharts2 = {
  series: [
    {
      type: 'pie',
      width: '100%',
      radius: ['80%', '90%'],
      // 图形上的文本标签设置项
      avoidLabelOverlap: false,
      label: {
        show: true,
        // 设置文本标签在图形中心位置
        position: "center",
        // 自定义文本标签的内容和格式，title是文本'总额度/GB'的样式名，num是文本'10,000'的样式名，.join("\n")是给文本加换行
        formatter: ["{title|已实名用户/万}", "{num|50}"].join("\n"),
        // 设置formatter中的文本样式，要用对应的标记样式名
        rich: {
          title: {
            padding: [0, 0, 8, 0],
            color: "#424864",
          },
          num: {
            color: "#424864",
          },
        },
      },
      // 标签的视觉引导线配置
      labelLine: {
        // 设置为不显示视觉引导线
        show: false,
      },
      data: [
        {
          value: 222,
          name: 'B',
          itemStyle: {
            normal: {
              color: '#91cc75',
            },
          }
        }, {
          value: 222,
          name: 'A',
          itemStyle: {
            normal: {
              color: '#ddd',
            }
          }
        },
      ],
      emphasis: {
        disabled: true,
        scale: false,
      },
    }
  ]
};

export const circleEcharts3 = {
  series: [
    {
      type: 'pie',
      width: '100%',
      radius: ['80%', '90%'],
      // 图形上的文本标签设置项
      avoidLabelOverlap: false,
      label: {
        show: true,
        // 设置文本标签在图形中心位置
        position: "center",
        // 自定义文本标签的内容和格式，title是文本'总额度/GB'的样式名，num是文本'10,000'的样式名，.join("\n")是给文本加换行
        formatter: ["{title|已认证商户数/万}", "{num|100}"].join("\n"),
        // 设置formatter中的文本样式，要用对应的标记样式名
        rich: {
          title: {
            padding: [0, 0, 8, 0],
            color: "#424864",
          },
          num: {
            color: "#424864",
          },
        },
      },
      // 标签的视觉引导线配置
      labelLine: {
        // 设置为不显示视觉引导线
        show: false,
      },
      data: [
        {
          value: 20,
          name: 'B',
          itemStyle: {
            normal: {
              color: '#ffe790',
            },
          }
        }, {
          value: 3,
          name: 'A',
          itemStyle: {
            normal: {
              color: '#ddd',
            }
          }
        },
      ],
      emphasis: {
        disabled: true,
        scale: false,
      },
    }
  ]
};

export const circleEcharts4 = {
  series: [
    {
      type: 'pie',
      width: '100%',
      radius: ['80%', '90%'],
      // 图形上的文本标签设置项
      avoidLabelOverlap: false,
      label: {
        show: true,
        // 设置文本标签在图形中心位置
        position: "center",
        // 自定义文本标签的内容和格式，title是文本'总额度/GB'的样式名，num是文本'10,000'的样式名，.join("\n")是给文本加换行
        formatter: ["{title|正在开展活动/个}", "{num|3}"].join("\n"),
        // 设置formatter中的文本样式，要用对应的标记样式名
        rich: {
          title: {
            padding: [0, 0, 8, 0],
            color: "#424864",
          },
          num: {
            color: "#424864",
          },
        },
      },
      // 标签的视觉引导线配置
      labelLine: {
        // 设置为不显示视觉引导线
        show: false,
      },
      data: [{
        value: 335,
        name: 'A',
        itemStyle: {
          normal: {
            color: '#5470c6',
          }
        }
      },
      ],
      emphasis: {
        disabled: true,
        scale: false,
      },
    }
  ]
};

export const circleEcharts5 = {
  legend: {
    type: 'scroll',
    align: 'right',
    orient: 'vertical',
    right: 0,

  },
  series: [
    {
      type: 'pie',
      width: '80%',
      radius: ['20%', '40%'],
      // 图形上的文本标签设置项
      data: [
        {
          value: 2,
          name: '互动游戏',
          itemStyle: {
            normal: {
              color: '#5470c6',
            }
          }
        }, {
          value: 1,
          name: '转介活动',
          itemStyle: {
            normal: {
              color: '#ffe790',
            }
          }
        }, {
          value: 2,
          name: '派券活动',
          itemStyle: {
            normal: {
              color: '#91cc75',
            }
          }
        }, {
          value: 0,
          name: '平台活动',
          itemStyle: {
            normal: {
              color: '#fa4ac4',
            }
          }
        },
      ],
      label : {
        normal : {
            formatter: '{b}:({d}%)',
            textStyle : {
                fontWeight : 'normal',
                fontSize : 12
            }
        }
    },
    }
  ]
};

// export const barEcharts = {
//   grid: {
//     top: '18%',
//     left: '10%',  // grid布局设置适当调整避免X轴文字只能部分显示
//     right: '10%', // grid布局设置适当调整避免X轴文字只能部分显示
//     bottom: '15%',
//   },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow'
//     }
//   },
//   xAxis: [
//     {
//       data: [
//         "全省",
//         "南阳",
//         "洛阳",
//         "济源",
//         "开封",
//       ],
//       axisTick: {
//         // 轴刻度
//         show: false,
//       },
//       axisLabel: {
//         // 轴文字
//         show: true,
//         color: "#A0B2D3",
//         fontSize: 12,
//       },
//     },
//   ],
//   yAxis: {
//     type: "value",
//     minInterval: 1,
//   },
//   series: [
//     {
//       itemStyle: {
//         color: "#91cc75",
//       },
//       data: ['5', '3', '2', '2', '2'],
//       type: "bar",
//     },
//   ],
// };